<template>
  <div class="dashboard-container">
    <div class="earnings">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="card card1">
            <div class="header">
              <p class="label">今日收益</p>
              <p class="price">¥ {{ orderStats.today_amount }}</p>
            </div>
            <div class="chart">
              <div class="left">
                <p class="label">昨日收益</p>
                <p class="value">¥ {{ orderStats.yesterday_amount }}</p>
              </div>
              <div class="right">
                <p class="label" v-if="orderStats.day_incr_stat === 'plus'">
                  <span>同比增加</span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="13"
                    height="13"
                    viewBox="0 0 24 24"
                    class="svg-icon"
                  >
                    <path fill="#12b937" d="M15 12h4.5L12 2L4.5 12H9v10h6z" />
                  </svg>
                </p>
                <p class="label" v-if="orderStats.day_incr_stat === 'minus'">
                  <span>同比减少</span
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="13"
                    height="13"
                    viewBox="0 0 24 24"
                    class="svg-icon"
                  >
                    <path fill="#d64a4a" d="M15 12h4.5L12 22L4.5 12H9V2h6z" />
                  </svg>
                </p>
                <p :class="'value' + ' ' + orderStats.day_incr_stat">¥ {{ orderStats.day_incr }}</p>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6"
          ><div class="card card2">
            <div class="header">
              <p class="label">本周收益</p>
              <p class="price">¥ {{ orderStats.this_week_amount }}</p>
            </div>
            <div class="chart">
              <div class="left">
                <p class="label">上周收益</p>
                <p class="value">¥ {{ orderStats.last_week_amount }}</p>
              </div>
              <div class="right">
                <p class="label" v-if="orderStats.week_incr_stat === 'plus'">
                  <span>同比增加</span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="13"
                    height="13"
                    viewBox="0 0 24 24"
                    class="svg-icon"
                  >
                    <path fill="#12b937" d="M15 12h4.5L12 2L4.5 12H9v10h6z" />
                  </svg>
                </p>
                <p class="label" v-if="orderStats.week_incr_stat === 'minus'">
                  <span>同比减少</span
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="13"
                    height="13"
                    viewBox="0 0 24 24"
                    class="svg-icon"
                  >
                    <path fill="#d64a4a" d="M15 12h4.5L12 22L4.5 12H9V2h6z" />
                  </svg>
                </p>
                <p :class="'value' + ' ' + orderStats.week_incr_stat">
                  ¥ {{ orderStats.week_incr }}
                </p>
              </div>
            </div>
          </div></el-col
        >
        <el-col :span="6"
          ><div class="card card3">
            <div class="header">
              <p class="label">本月收益</p>
              <p class="price">¥ {{ orderStats.this_month_amount }}</p>
            </div>
            <div class="chart">
              <div class="left">
                <p class="label">上月收益</p>
                <p class="value">¥ {{ orderStats.last_month_amount }}</p>
              </div>
              <div class="right">
                <p class="label" v-if="orderStats.month_incr_stat === 'plus'">
                  <span>同比增加</span>
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="13"
                    height="13"
                    viewBox="0 0 24 24"
                    class="svg-icon"
                  >
                    <path fill="#12b937" d="M15 12h4.5L12 2L4.5 12H9v10h6z" />
                  </svg>
                </p>
                <p class="label" v-if="orderStats.month_incr_stat === 'minus'">
                  <span>同比减少</span
                  ><svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="13"
                    height="13"
                    viewBox="0 0 24 24"
                    class="svg-icon"
                  >
                    <path fill="#d64a4a" d="M15 12h4.5L12 22L4.5 12H9V2h6z" />
                  </svg>
                </p>
                <p :class="'value' + ' ' + orderStats.month_incr_stat">
                  ¥ {{ orderStats.month_incr }}
                </p>
              </div>
            </div>
          </div></el-col
        >
        <el-col :span="6">
          <div class="card card4">
            <div class="all">
              <div class="top top1">
                <p class="label">历史收益</p>
                <p class="value">¥ {{ orderStats.total_amount }}</p>
              </div>
              <div class="top top2">
                <p class="label">历史订单</p>
                <p class="value">{{ orderStats.total_order_num }}</p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="charts-container">
      <div ref="lineChart" class="charts"></div>
    </div>
  </div>
</template>

<script>
// 按需引入 ECharts 核心模块
import * as echarts from 'echarts/core'
// 引入图表类型：折线图
import { LineChart } from 'echarts/charts'
// 引入必要的组件
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'
// 引入 Canvas 渲染器
import { CanvasRenderer } from 'echarts/renderers'

// 注册组件
echarts.use([
  LineChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  CanvasRenderer
])
import { getOrderStats, getAttractionStats } from '@/api/common'
// import checkPermission from '@/utils/permission'

export default {
  name: 'Dashboard',
  data() {
    return {
      orderStats: {},
      chartInstance: null
    }
  },
  mounted() {
    getOrderStats().then((res) => {
      this.orderStats = res.data
    })
    getAttractionStats().then((res) => {
      this.initChart(res.data)
    })
  },
  methods: {
    // checkPermission,
    initChart(data) {
      const { days_label, days_stats } = data
      const legend = days_stats.map((item) => item.attraction_name)
      console.log('legend', legend)
      const series = days_stats.map((item) => {
        return {
          name: item.attraction_name,
          type: 'line',
          data: item.stats,
          stack: 'Total'
        }
      })

      // 获取容器
      const chartDom = this.$refs.lineChart

      // 初始化 ECharts 实例
      this.chartInstance = echarts.init(chartDom)

      // 配置选项
      const option = {
        title: {
          text: '最近7天订单量统计图',
          textStyle: {
            color: '#666'
          }
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: legend,
          orient: 'vertical',
          right: '0', // 距离容器右侧 10px
          top: '20px' // 图例居中
        },
        grid: {
          left: '3%',
          right: '20%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: days_label
        },
        yAxis: {
          type: 'value'
        },
        series
      }

      // 设置选项
      this.chartInstance.setOption(option)
    }
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose()
    }
  }
}
</script>

<style lang="less" scoped>
.dashboard-container {
  padding-right: 20px;
}
.card {
  height: 136px;
  background-color: #fff;
  border-radius: 20px;
  padding: 18px 20px 15px;
  position: relative;
  ::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 32px;
    background-color: #e6e6e6;
  }
  .label {
    color: #666;
  }
  .header {
    border-bottom: 1px dashed #e6e6e6;
    padding-bottom: 5px;
    .price {
      font-size: 20px;
      font-weight: 600;
      margin-top: 6px;
    }
  }
  .chart {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    .left,
    .right {
      width: 50%;
    }
    .right {
      padding-left: 16px;
    }
    .label {
      font-size: 12px;
      display: flex;
      align-items: center;
      .svg-icon {
        margin-left: 2px;
      }
    }
    .value {
      font-size: 12px;
      font-weight: 600;
      margin-top: 5px;
      color: #333;
      &.plus {
        color: #12b937;
      }
      &.minus {
        color: #d64a4a;
      }
    }
  }

  &.card1 {
    .price {
      color: #1677ff;
    }
  }
  &.card2 {
    .price {
      color: #ffa516;
    }
  }
  &.card3 {
    .price {
      color: #12b937;
    }
  }
}
.card4 {
  ::after {
    display: none;
  }
  .top {
    height: 52px;
    display: flex;
    align-items: center;
    .value {
      margin-left: 16px;
      font-weight: 600;
      font-size: 20px;
    }
  }
  .top1 {
    border-bottom: 1px dashed #e6e6e6;
    .value {
      color: #8378ea;
    }
  }
  .top2 {
    height: 52px;
    .value {
      color: #37a2da;
    }
  }
}
.charts-container {
  width: 100%;
  height: 500px;
  padding: 20px 25px;
  margin-top: 10px;
  background-color: #fff;
  border-radius: 20px;
}
.charts {
  width: 100%;
  height: 500px;
  // padding: 20px 25px;
  // margin-top: 10px;
  // background-color: #fff;
  // border-radius: 20px;
}
</style>
